<template>
  <a-card class="fromBox" title="基金申报表单">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="resetForm(0)"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <a-steps :current="current" :items="items" type="navigation" @change="StepsChange"></a-steps>
    <div class="steps-content">
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
        <a-form-item label="父协议" name="blapplyname" v-show="steps[current].title == '第一步'" mode="multiple" :showSearch="false">
          <a-select v-model:value="formState.blapplyname" placeholder="请选择父协议" mode="multiple" :showSearch="false" allowClear disabled>
            <a-select-option :value="item.blagreementname" v-for="(item, index) in Father">{{ item.blagreementname }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目名称" name="blapplyprojectname" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blapplyprojectname" placeholder="请填写" disabled />
        </a-form-item>
        <a-form-item label="项目编号" name="blext2" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blext2" placeholder="请填写" disabled />
        </a-form-item>
        <a-form-item label="项目负责人" name="blprojectmanagepeople" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojectmanagepeople" placeholder="请选择项目负责人" disabled>
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目联系人" name="blprojectcontactpeople" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojectcontactpeople" placeholder="请选择项目联系人" disabled>
            <a-select-option value="shanghai">Zone one</a-select-option>
            <a-select-option value="beijing">Zone two</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申请经费(保留小数点两位)" name="blprojectmoney" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blprojectmoney" placeholder="请填写" disabled style="width: 200px" />
          <span style="color: red">(单位/元)</span>
        </a-form-item>
        <a-form-item label="受益范围" name="blprojectbenefitpeoplerange" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blprojectbenefitpeoplerange" placeholder="请填写" disabled />
        </a-form-item>
        <a-form-item label="拟受益人数(人)" name="blprojectbenefitpeoplenumber" v-show="steps[current].title == '第一步'">
          <a-input v-model:value="formState.blprojectbenefitpeoplenumber" placeholder="请填写" disabled style="width: 200px" />
        </a-form-item>
        <a-form-item label="项目类别" name="blprojecttype" v-show="steps[current].title == '第一步'">
          <a-select v-model:value="formState.blprojecttype" placeholder="请选择项目类别" disabled>
            <a-select-option :value="0">奖学金</a-select-option>
            <a-select-option :value="1">助学金</a-select-option>
            <a-select-option :value="2">奖教金</a-select-option>
            <a-select-option :value="3">学生创新创业基金</a-select-option>
            <a-select-option :value="4">事业发展基金</a-select-option>
            <a-select-option :value="5">学术论坛</a-select-option>
            <a-select-option :value="6">教师发展基金</a-select-option>
            <a-select-option :value="7">物质设备</a-select-option>
            <a-select-option :value="8">学生发展基金</a-select-option>
            <a-select-option :value="9">双联活动专款</a-select-option>
            <a-select-option :value="10">社会公益事业</a-select-option>
            <a-select-option :value="11">公共服务体系建设</a-select-option>
            <a-select-option :value="12">校园活动</a-select-option>
            <a-select-option :value="13">救助基金</a-select-option>
            <a-select-option :value="14">学科建设</a-select-option>
            <a-select-option :value="15">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="其他项目类别" name="blothertype" v-show="steps[current].title == '第一步'" v-if="formState.blprojecttype == 15">
          <a-input v-model:value="formState.blothertype" placeholder="请填写" disabled />
        </a-form-item>
        <a-form-item label="起止日期" name="Time" v-show="steps[current].title == '第一步'">
          <a-range-picker v-model:value="formState.Time" format="YYYY-MM-DD" disabled />
        </a-form-item>
        <a-form-item label="是否有其他资金支持" name="blprojectothermoney" v-show="steps[current].title == '第一步'">
          <a-radio-group v-model:value="formState.blprojectothermoney" disabled>
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否有志愿者" name="blprojectvolunteer" v-show="steps[current].title == '第一步'">
          <a-radio-group v-model:value="formState.blprojectvolunteer" disabled>
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="志愿者人数"
          name="blprojectvolunteernum"
          v-show="steps[current].title == '第一步'"
          v-if="formState.blprojectvolunteer == 1"
        >
          <a-input v-model:value="formState.blprojectvolunteernum" placeholder="请填写" style="width: 150px" disabled />
          <span>(人)</span>
        </a-form-item>
        <div class="jianjie" v-show="steps[current].title == '第二步'">
          <span>
            一、项目简介和创新点分析（请用一段话简明扼要的语言概括项目的关键内容，然后分点列出主要创新性或者项目亮点。阿拉伯数字后面请用“.”——即英文输入模式下的点，不能使用逗号或顿号。）
          </span>
          <a-form-item label="" name="blprojectprofile" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectprofile" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第二步'">
          <span> 二、项目方案（可包括项目实施目的、背景、前期准备、目标任务、行动方案，可另附页。） </span>
          <a-form-item label="" name="blprojectplan" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectplan" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第三步'">
          <span> 三、项目的可行性分析（可从人、财、物三方面分析项目的可行性。） </span>
          <a-form-item label="" name="blprojectfeasibility" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectfeasibility" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第三步'">
          <span> 四、项目进度安排（300-500字，包括进度计划安排，实施阶段和步骤等） </span>
          <a-form-item label="" name="blprojectspeed" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojectspeed" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第四步'">
          <span> 五、项目完成预期效果与形式 </span>
          <a-form-item label="" name="blprojecteffects" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blprojecteffects" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div class="jianjie" v-show="steps[current].title == '第四步'">
          <span> 六 、经费使用计划（如有其它资金支持，请在经费使用计划中注明。 </span>
          <a-form-item label="" name="blmoney" :wrapper-col="{ span: 30, offset: 0 }">
            <a-textarea v-model:value="formState.blmoney" :rows="12" placeholder="请填写" disabled />
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="steps-action">
      <a-space>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"><ArrowLeftOutlined />上一步</a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="resetForm(0)"> 返回 </a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步<ArrowRightOutlined /></a-button>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, defineProps, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { Instantly } from '../../../../api/instantly/instantly-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import dayjs from 'dayjs';
  //  步骤条
  const current = ref(0);
  //点击步骤条的事件
  function StepsChange(e) {
    current.value = e;
  }
  //前进
  const next = () => {
    current.value++;
  };
  //后退
  const prev = () => {
    current.value--;
  };
  //步骤条标题
  const steps = [
    {
      title: '第一步',
    },
    {
      title: '第二步',
    },
    {
      title: '第三步',
    },
    {
      title: '第四步',
    },
  ];
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };
  const formState = ref({});
  const props = defineProps({
    DataId: String,
  });
  //  父级协议
  const Father = ref([]);
  async function getInitFarter() {
    try {
      let res = await Instantly.FoundFarter();
      Father.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //详情
  const dateFormat = 'YYYY-MM-DD';
  function getInitDateDetail() {
    console.log(props.DateId, 'DateId');
    let blinfoid = props.DataId;
    Instantly.detailApi(blinfoid)
      .then((res) => {
        formState.value = res.blapplyprojectinfo;
        formState.value.Time = [
          dayjs(res.blapplyprojectinfo.blprojectdatestart, dateFormat),
          dayjs(res.blapplyprojectinfo.blprojectdateend, dateFormat),
        ];
        formState.value.blapplyname = res.blapplyprojectinfo.blapplyname.split(',');
      })
      .catch((e) => {
        smartSentry.captureError(e);
      });
  }

  onMounted(() => {
    getInitDateDetail();
  });
  const emit = defineEmits();
  const resetForm = (e) => {
    let obj = { type: e };
    emit('getBlack', obj);
  };
</script>

<style lang="scss" scope>
  .steps-content {
    width: 100%;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 500px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
  .fromBox {
  }
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
</style>
